iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
自我挑戰組

自學vue~點亮Roadmap過程系列 第 5

vue3鍊成術第五天-甚麼是vue

  • 分享至 

  • xImage
  •  

甚麼是vue

是一個用於建立使用者介面的 JavaScript 框架。它建構在標準 HTML、CSS 和 JavaScript 之上,並提供聲明性的、基於元件的程式設計模型,幫助您有效率地開發任何複雜性的使用者介面。

聲明式渲染:
Vue 使用模板語法擴充了標準 HTML,該語法允許我們基於 JavaScript 狀態以聲明方式描述 HTML 輸出。

反應性:
Vue 會自動追蹤 JavaScript 狀態變化,並在變化發生時有效地更新 DOM。

漸進式框架
Vue 是一個框架,也是一個生態。其功能覆蓋了大部分前端開發常見的需求。但 Web 世界是十分多樣化的,不同的開發者在 Web 上構建的東西可能在形式和規模上會有很大的不同。考慮到這一點,Vue 的設計非常注重靈活性和“可以被逐步集成”這個特點。根據你的需求場景,你可以用不同的方式使用 Vue:

  • 無需構建步驟,漸進式增強靜態的 HTML
  • 在任何頁面中作為 Web Components 嵌入
  • 單頁應用 (SPA)
  • 全棧 / 服務端渲染 (SSR)
  • Jamstack / 靜態站點生成 (SSG)
  • 開發桌面端、移動端、WebGL,甚至是命令行終端中的界面

單文件組件
在大多數啟用了構建工具的 Vue 項目中,我們可以使用一種類似 HTML 格式的文件來書寫 Vue 組件,它被稱為單文件組件 (也被稱為 *.vue 文件,英文 Single-File Components,縮寫為 SFC)。顧名思義,Vue 的單文件組件會將一個組件的邏輯 (JavaScript),模板 (HTML) 和樣式 (CSS) 封裝在同一個文件裡。

Vue 的單文件組件是網頁開發中 HTML、CSS 和 JavaScript 三種語言經典組合的自然延伸。、 和 三個塊在同一個文件中封裝、組合了組件的視圖、邏輯和樣式。

API 風格
Vue 的組件可以按兩種不同的風格書寫:選項式 API 和組合式 API。

選項式 API (Options API)
使用選項式 API,我們可以用包含多個選項的對象來描述組件的邏輯,例如 data、methods 和 mounted。選項所定義的屬性都會暴露在函數內部的 this 上,它會指向當前的組件實例。

<script>
export default {
  // data() 返回的屬性將會成為響應式的狀態
  // 並且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用來更改狀態與觸發更新的函數
  // 它們可以在模板中作為事件處理器綁定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命週期鉤子會在組件生命週期的各個不同階段被調用
  // 例如這個函數就會在組件掛載完成後被調用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

組合式 API (Composition API)
通過組合式 API,我們可以使用導入的 API 函數來描述組件邏輯。在單文件組件中,組合式 API 通常會與 script setup 搭配使用。這個 setup 屬性是一個標識,告訴 Vue 需要在編譯時進行一些處理,讓我們可以更簡潔地使用組合式 API。例如,script setup 中的導入和頂層變量/函數都能夠在模板中直接使用。

下面是使用了組合式 API 與 script setup 改造後和上面的模板完全一樣的組件:

<script setup>
import { ref, onMounted } from 'vue'

// 響應式狀態
const count = ref(0)

// 用來修改狀態、觸發更新的函數
function increment() {
  count.value++
}

// 生命週期鉤子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

上一篇
vue3鍊成術第四天-專案建置(Vite)
下一篇
vue3鍊成術第六天-語法
系列文
自學vue~點亮Roadmap過程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
maxtsou
iT邦新手 5 級 ‧ 2024-09-30 09:12:22

你好!

請問本篇最後面「組合式 API (Composition API)」,為何會冒出一個 setup 出來?還有這一句「例如, 中的導入和頂層變量/函數都能夠在模板中直接使用。」,什麼東西「中的」?

寫文章是很辛苦(謝謝你),但是這網站有諸多新手在此學習,所以建議你再辛苦一下,加個例子或搭配截圖說明以及內容校稿,避免新手越看越看不懂。

謝謝!

我要留言

立即登入留言